<template>
  <div class="address">
    <el-dialog title="添加邮寄地址" :visible.sync="isShow" center :before-close="close" width="40%">
      
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="联络人" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮寄地址" prop="broad">
          <section class="container">
            <el-row>
              <el-select v-model="provinceValue" placeholder="请选择" @change="selectProvimce">
                <el-option
                  v-for="(item,index) of provincearr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="cityValue" placeholder="请选择" @change="selectcity">
                <el-option v-for="(item,index) of cityarr" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <el-select placeholder="请选择" v-model="RegionValue" @change="selectregin">
                <el-option
                  v-for="(item,index) of regionarr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-row>
          </section>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input type="textarea" v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="postcode">
          <el-input v-model.number="ruleForm.postcode"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model.number="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="默认地址" prop="delivery">
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { province } from '../pages/user/home/map'
export default {
  name: "app",
  data() {
    var validatePhone = function(rule, value, callback) {
      if (value === "") {
        callback(new Error("请填写手机号"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请填写正确的手机号"));
      } else {
        callback();
      }
    };
    var validatePostcode = function(rule, value, callback) {
      if (value === "") {
        callback(new Error("请填写邮政编号"));
      } else if (!/^[0-9]{6}$/.test(value)) {
        callback(new Error("请填写正确的邮政编号"));
      } else {
        callback();
      }
    };
    var validatorName = function(rule, value, callback) {
      if (value === "" || value == undefined || value == null) {
        callback(new Error("请输入账号姓名"));
      } else {
        if (!/^[\u2E80-\u9FFF]+$/.test(value)) {
          callback(new Error("请输入正确的账号姓名"));
        } else {
          callback();
        }
      }
    };
    return {
      arr: [1, 3, 4],
      province: [],
      cityarr: [],
      regionarr: [],
      provinceValue: '',
      cityValue: '',
      RegionValue: '',

      isShow: false,
      address: "",
      ruleForm: {
        name: "",
        broad:'',
        area_code:'',
        address: "",
        delivery: false,
        postcode: "",
        phone: ""
      },
      rules: {
        name: [
          { required: true, validator: validatorName }
        ],
        broad: [
          { required: true, message: "请选择邮寄地址", trigger: "change" }
        ],
        address: [
          { required: true, message: "请填写详细的联系地址", trigger: "change" }
        ],
        postcode: [
          { required: true, validator: validatePostcode, trigger: "change" }
        ],
        phone: [{ required: true, validator: validatePhone, trigger: "change" }]
      }
    };
  },
  created () {
    this.provincearr = province
  },
  methods: {
    selectProvimce (id) {
      this.cityarr = [];
      this.regionarr = [];
      this.cityValue = '';
      this.RegionValue = '';
      for (let item of this.provincearr) {
        if (id == item.id) {
          this.cityarr = item.children
          this.provinceValue = item.name
        }
      }
    },
    selectcity (id) {
      this.regionarr = [];
      this.RegionValue = '';
      for (let item of this.cityarr) {
        if (id == item.id) {
          this.regionarr = item.children
          this.cityValue = item.name
        }
      }
    },
    selectregin(id){
      this.ruleForm.area_code = id
      for (let item of this.regionarr) {
        if (id == item.id) {
          this.RegionValue = item.name
        }
      }
      this.address = this.provinceValue + this.cityValue + this.RegionValue
      this.ruleForm.broad = this.address
    },

    show() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
    },
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.ruleForm.selectedOptions.length; i++) {
        loc += CodeToText[this.ruleForm.selectedOptions[i]];
      }
      this.address = loc
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.address = this.address + this.ruleForm.address;
          let params = {
            address: this.address,
            liaison: this.ruleForm.name,
            postcode: this.ruleForm.postcode,
            phone: this.ruleForm.phone,
            area_code: this.ruleForm.area_code,
          };
          if (this.ruleForm.delivery) {
            params.default_address = 1;
          } else {
            params.default_address = 2;
          }
          this.$axios
            .post("api/user_address", params)
            .then(res => {
              if (res.data.code == 200) {
                this.isShow = false;
                this.$parent.getAddress();
                this.$alert("地址添加成功", "提示", {
                  confirmButtonText: "确定",
                  center: true,
                  type: "success",
                  callback: action => {}
                });
                this.$refs[formName].resetFields();
              }
            })
            .catch(err => {});
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
.el-cascader {
  width: 100%;
}
.el-select{
  width: 30%;
}
</style>